Skip to content

Images in custom subnav - #16664

Merged
michaelclapham merged 9 commits into
mainfrom
gl/image-in-custom-subnav-test
Sep 16, 2026
Merged

michaelclapham merged 9 commits into
mainfrom
gl/image-in-custom-subnav-test

Conversation

@Georges-GNM

@Georges-GNM Georges-GNM commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

What does this change?

Updates the custom subnav model to match the latest facia scala definition (thereby having to regenerate schemas) and displays subnav images correctly (via the generateurl method/fastly resizer)

From the designs, these are only appearing on fronts. There's a slight styling difference compared to a subnav without an image, where the background doesn't span the width of the page, and instead we have white columns on the sides.

How has this change been tested?

Screenshots

image

@Georges-GNM Georges-GNM changed the title Wire custom subnav to articles and style component correctly test images in custom subnav Sep 2, 2026
@Georges-GNM
Georges-GNM force-pushed the gl/image-in-custom-subnav-test branch from 08a5fb4 to 750b4e2 Compare September 9, 2026 00:45
@github-actions

github-actions Bot commented Sep 9, 2026

Copy link
Copy Markdown

🚀 Image pushed to AWS ECR

Image digest: sha256:5d2d9a2f90ad7f08522d4bd61729a7be7fa1aa8382a9daf946f83e04d5f9b06d

🐛 Run the image locally

The following can be used to run the image locally:

# Refer to image using the immutable digest. Find alternatives below.
IMAGE_IDENTIFIER="@sha256:5d2d9a2f90ad7f08522d4bd61729a7be7fa1aa8382a9daf946f83e04d5f9b06d"

# Refer to image using branch tag
# IMAGE_IDENTIFIER=":branch-gl-image-in-custom-subnav-test"

# Refer to image using build tag
# IMAGE_IDENTIFIER=":build-31177"

# Refer to image via the GitHub commit SHA tag
# IMAGE_IDENTIFIER=":sha-8ae44f41d0a3b4ccc1f7b98c87c4417095fdc9c3"

# Set environment variables for the AWS CLI
AWS_PROFILE="<A_PROFILE_FROM_JANUS>"
AWS_DEFAULT_REGION="eu-west-1"

IMAGE_ACCOUNT_ID=$(aws ssm get-parameter --name /organisation/accounts/artifacts --query "Parameter.Value" --output text)
REGISTRY="${IMAGE_ACCOUNT_ID}.dkr.ecr.${AWS_DEFAULT_REGION}.amazonaws.com"
IMAGE="${REGISTRY}/guardian/dotcom-rendering${IMAGE_IDENTIFIER}"

# Login to AWS ECR https://docs.aws.amazon.com/AmazonECR/latest/userguide/registry_auth.html
aws ecr get-login-password | docker login --username AWS --password-stdin $REGISTRY

# Pull the image
docker pull $IMAGE

# Run the image. You'll likely need to set additional flags. See https://docs.docker.com/reference/cli/docker/container/run.
docker run $IMAGE

From guardian/actions-publish-image.

@github-actions

github-actions Bot commented Sep 9, 2026

Copy link
Copy Markdown

@Georges-GNM
Georges-GNM force-pushed the gl/image-in-custom-subnav-test branch from 750b4e2 to 068ffb7 Compare September 9, 2026 08:50
@Georges-GNM Georges-GNM added the feature Departmental tracking: work on a new feature label Sep 10, 2026
@Georges-GNM Georges-GNM changed the title test images in custom subnav Images in custom subnav Sep 10, 2026
@Georges-GNM Georges-GNM self-assigned this Sep 10, 2026
@Georges-GNM Georges-GNM added run_chromatic Runs chromatic when label is applied and removed Do not merge ⚠️ labels Sep 15, 2026
@Georges-GNM
Georges-GNM marked this pull request as ready for review September 15, 2026 08:55
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Sep 15, 2026
@SiAdcock

Copy link
Copy Markdown
Contributor

From the designs, these are only appearing on fronts.

Is this a requirement? What happens if you add an image to a subnav that appears in an article?

@Georges-GNM
Georges-GNM force-pushed the gl/image-in-custom-subnav-test branch from 29f2d14 to eb13822 Compare September 15, 2026 12:34
@Georges-GNM Georges-GNM added the run_chromatic Runs chromatic when label is applied label Sep 15, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Sep 15, 2026

@michaelclapham michaelclapham left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested in CODE and on fronts without images and with images it's looking good at various different width breakpoints!

Nice work!!! 😎 🖼️ 🥳

@Georges-GNM Georges-GNM added the run_chromatic Runs chromatic when label is applied label Sep 15, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Sep 15, 2026

@SiAdcock SiAdcock left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code-wise it looks good. @michaelclapham tested on CODE, so good to go 🚂

@michaelclapham
michaelclapham added this pull request to the merge queue Sep 16, 2026
Merged via the queue into main with commit 6e71fcf Sep 16, 2026
46 of 47 checks passed
@michaelclapham
michaelclapham deleted the gl/image-in-custom-subnav-test branch September 16, 2026 08:56
@gu-prout

gu-prout Bot commented Sep 16, 2026

Copy link
Copy Markdown

Seen on PROD (created by @Georges-GNM and merged by @michaelclapham 7 minutes ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature Departmental tracking: work on a new feature Seen-on-PROD

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants